<template>
  <!-- <div class="container">
    <router-view></router-view>
    <el-container>
      <el-header>
        编程式
        <el-button type="primary" icon="el-icon-edit" 
               circle size="mini" @click="jump('/c/p1')"></el-button>
        <el-button type="primary" icon="el-icon-edit" 
               circle size="mini" @click="jump('/c/p2')"></el-button>
        <el-button type="primary" icon="el-icon-edit" 
               circle size="mini" @click="jump('/c/p3')"></el-button>
      </el-header>
      <el-container>
        <el-aside width="200px">
           标签式 
            <router-link to="/c/p1">p1</router-link>
            <router-link to="/c/p2">p2</router-link>
            <router-link to="/c/p3">p3</router-link>
        </el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div> -->
  <div class="container">
  <router-view></router-view>
    <el-menu router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    <el-submenu index="/c">
        <span slot="title">
            <i class="el-icon-platform-eleme"></i>
            菜单1
        </span>
        <el-menu-item index="/c/p1">子项1</el-menu-item>
        <el-menu-item index="/c/p2">子项2</el-menu-item>
        <el-menu-item index="/c/p3">子项3</el-menu-item>
    </el-submenu>
    <el-menu-item index="/c2">
        <span slot="title">
            <i class="el-icon-phone"></i>
            菜单2
        </span>
    </el-menu-item>
    <el-menu-item index="/c3">
        <span slot="title">
            <i class="el-icon-star-on"></i>
            菜单3
        </span>
    </el-menu-item>
</el-menu>
  </div>
</template>
<script >
const options={
    methods:{
        // 编程式
        jump(url){
            this.$router.push(url)
        }
    }
}
export default options
</script>